<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>TimeLine Demo</title>
    <script src="/vis/dist/moment.js"></script>
    <script src="/vis/dist/vis.min.js"></script>
    <link href="/vis/dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="visualization"></div>

    <script th:inline="javascript">
        // DOM element where the Timeline will be attached
        var container = document.getElementById('visualization');
        // create a data set with groups
        var groups = new vis.DataSet();
        groups.add([
            {
                id: 1,
                content: "Lee",
                nestedGroups: [11,12,13]
            },
            {
                id: 2,
                content: "invisible group",
                visible: false
            },
            {
                id: 3,
                content: "John",
                nestedGroups: [14],
                showNested: false
            },
            {
                id: 4,
                content: "Alson"
            },
            {
                id: 11,
                content: "cook",
            },
            {
                id: 12,
                content: "shop",
            },
            {
                id: 13,
                content: "clean house",
            },
            {
                id: 14,
                content: "wash dishes",
            }
        ]);
    
    
        // Create a DataSet (allows two way data-binding)
        var items = new vis.DataSet(/*[[${dataSetList}]]*/);
        /**[
         {id: 1, content: '<span style="color:#97B0F8;">(item 1)</span>', start: '2017-09-12', group: 1},
         {id: 2, content: 'item 2', start: '2017-09-14', group: 1},
         {id: 3, content: 'item 3', start: '2017-09-18', group: 3},
         {id: 4, content: 'item 4', start: '2017-09-16', end: '2017-09-19', group: 3},
         {id: 5, content: 'item 5', start: '2017-09-25', group: 3},
         {id: 6, content: 'item 6', start: '2017-09-27', type: 'point', group: 1}//var types = [ 'box', 'point', 'range', 'background']
         ]
         start: new Date(),
         end: new Date(new Date().getTime() + 1000000),
         rollingMode: {
                  follow: true,
                  offset: 0.5
                }*/
            // Configuration for the Timeline
        var options = {
                height: '700px',
                groupOrder: 'content',  // groupOrder can be a property name or a sorting function
                locale: 'zh-cn'
            };
    
        // Create a Timeline
        var timeline = new vis.Timeline(container, items, options);
    </script>
</body>
</html>